<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="447405759@qq.com" />
    <meta name="description" content="belong to me" />
    <meta name="keywords" content="Web前端开发" />
    <link   type="image/x-icon" rel="shortcut icon" href="IMG/bitbug_favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="lib/Bootstrap.css">
    <link rel="stylesheet" type="text/css" href="CSS/index.css">
    <link rel="stylesheet" media="(max-width:768px)"  type="text/css" href="CSS/mobile.css">
    <title>WangJing.Blog</title>
</head>
<body>
  	
  		<div class="col-xs-3 ">
            <div class="logo">
                 <a  class='logo_a' href="index.html" title='BLOG-王晶'>王晶.blog</a>
                 <div class="small">初级前端。</div>
            </div>
            <label for="mobile-menu" id="label-menu">MENU</label>
            <input type="checkbox" id="mobile-menu"/>
            <ul class="ul-nav ">
                <li class="lis"><a href="index.html" class="btn btn-success">首页</a></li>
                <li class="lis"><a href="about.html">关于我</a></li>
                <li class="lis"><a href="contact.html">联系我</a></li>
            </ul>
        </div>
        <div class="col-xs-9">
        	<div class="shutter">
        		<a href="javascript:;" class="prev"><img src="IMG/prev01.png"/></a>
        		<div class="shutter-img">
        			<a href="javascript:;" ><img src="IMG/index-img02.jpg" class="shutter-img-a"/></a>
        			<!--<a href="javascript:;"><img src="IMG/index-img02.jpg"/></a>
        			<a href="javascript:;"><img src="IMG/index-img03.jpg"/></a>-->
        		</div>
        		<a href="javascript:;" class="next"><img src="IMG/next01.png"/></a>
        	</div>
        	<div class="footer">
           		<div id="footer_content">
           			@WangJing 2018/08/25，如有任何问题<a href="contact.html">请联系我</a>
           		</div>
          	</div>
        </div>   
</body>
</html>
   <script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.js"></script>
    <script type="text/javascript">
    	$(function(){
    		console.log('index.html');
			var imgArr =['IMG/index-img01.jpg','IMG/index-img02.jpg','IMG/index-img03.jpg','IMG/index-img04.jpg'];//以后有想加入的图片就放这里。随便加
    		var index = 1;//这里要注意上面的图片要更改的话要注意这里的索引值
    		var timer ;
    		//clearInterval(timer);//执行前先关闭- - 为了防止意外
    		timer = setInterval(function(){
    			index++;
    			if(index == imgArr.length){
    	   			index=0;
    	   		};
    	   		var imgSrc = imgArr[index];
    	   		 $('.shutter-img-a').hide();
    	   		 $('.shutter-img-a').attr('src',imgSrc).fadeIn(1000);
    	   		 console.log(index);
    			},3000);
    	   $('.next').click(function(){
    	   		index++;
    	   		if(index == imgArr.length){
    	   			index=0;
    	   		};//顺序-  - 逻辑一定要有0 0；
    	   		console.log(index);//方便修改- -
    	   		var imgSrc = imgArr[index];
    	   		 $('.shutter-img-a').hide();//不设置参数就看不到隐藏动画。速度快
    	   		 $('.shutter-img-a').attr('src',imgSrc).fadeIn(1000);
    	  	 });
    	  	$('.prev').click(function(){
    	  		if(index == 0){
    	  			index = imgArr.length;
    	  		};
    	  		index--;
    	  		var imgSrc = imgArr[index];
    	  		$('.shutter-img-a').hide();//不设置参数就看不到隐藏动画。速度快
    	   		 $('.shutter-img-a').attr('src',imgSrc).fadeIn(1000);
    	  		console.log(index);//方便修改
    	  	});
    	});
    </script>